<template>
  <a-modal :title="title" :visible="visible" :width="700" @cancel="onCancel">
    <a-form v-if="visible" layout="horizontal" :form="form" class="my-form">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="上级资源">
            <my-tree-select
              v-decorator="[
                'parentRes',
                { rules: [{ required: true, message: '该项必填' }] },
              ]"
            ></my-tree-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="资源类型">
            <a-radio-group
              default-value="menu"
              button-style="solid"
              v-decorator="['type', { initialValue: 'menu' }]"
            >
              <a-radio-button value="menu">菜单</a-radio-button>
              <a-radio-button value="btn">按钮</a-radio-button>
              <a-radio-button value="page">页面</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="唯一标识">
            <a-input
              v-decorator="[
                'key',
                {
                  rules: [
                    { required: true, message: '该项必填' },
                    { max: 5, message: '最多5字符' },
                  ],
                },
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="资源名">
            <a-input
              v-decorator="[
                'name',
                { rules: [{ required: true, message: '该项必填' }] },
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="资源路径">
            <a-input
              v-decorator="[
                'path',
                { rules: [{ required: true, message: '该项必填' }] },
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="外部是否显示">
            <a-switch
              v-decorator="['showOut', { initialValue: true }]"
              checked-children="是"
              un-checked-children="关"
              default-checked
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="内部是否显示">
            <a-switch
              v-decorator="['showIn', { initialValue: true }]"
              checked-children="是"
              un-checked-children="关"
              default-checked
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <a-button @click="onSave" type="primary">保存</a-button>
      <a-button @click="onCancel">取消</a-button>
    </template>
  </a-modal>
</template>

<script>
import MyTreeSelect from "./MyTreeSelect.vue";
export default {
  components: {
    MyTreeSelect,
  },
  model: {
    prop: "visible",
    event: "change",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      required: true,
    },
    initData: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
    };
  },

  mounted() {},
  watch: {
    initData: {
      handler: function (val) {
        if (val) {
          this.$nextTick(() => {
            this.form.setFieldsValue(val);
          });
        }
      },
    },
  },
  methods: {
    onSave() {
      const that = this;
      this.form.validateFields((errors, values) => {
        if (!errors) {
          console.log("values", values);
          that.$emit("change", false);
        }
      });
    },
    onCancel() {
      this.$emit("change", false);
    },
  },
};
</script>

<style scoped>
.my-form .ant-form-item {
  display: flex;
  flex-direction: row;
}
.my-form ::v-deep(.ant-form-item .ant-form-item-label) {
  flex-shrink: 0;
}
.my-form ::v-deep(.ant-form-item .ant-form-item-control-wrapper) {
  flex: 1;
  width: 0;
}
</style>
